import React, { useState, useEffect } from "react";
import './css/opinion.css'
import { LeftOutline, DeleteOutline } from 'antd-mobile-icons'
import { useNavigate, Outlet } from 'react-router-dom'
import { Tabs, Input, Switch, ImageUploader, Card, Space, TextArea } from 'antd-mobile'
import { demoSrc, mockUpload } from '../../utils/utils'
const opinion = () => {
    let navigate = useNavigate()

    const LimitCount = () => {
        const maxCount = 3;
        const [fileList, setFileList] = useState([

        ]);
        return (
            <ImageUploader value={fileList}
                className="opinion_img_div"
                onChange={setFileList}
                upload={mockUpload}
                multiple maxCount={3}
                showUpload={fileList.length < maxCount}
                onCountExceed={exceed => {
                    Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`);
                }} />);
    };



    return (
        <>
            <div className="opinion_div">
                <div className="opinion_top_div">
                    <div>
                        <LeftOutline className="opinion_left_icon" fontSize={20} onClick={() => navigate('/chen/layout/my')} />
                        <p>意见反馈</p>
                    </div>
                </div>
                <div className="opinion_content_div">
                    <Card className="opinion_content">
                        <span>反馈内容</span>
                        <TextArea
                            className="opinion_content_text"
                            placeholder='请输入10个字以上的反馈内容'
                            autoSize={{ minRows: 3, maxRows: 5 }}
                        // value={value}
                        // onChange={val => {
                        //     setValue(val)
                        // }}
                        />
                    </Card>

                    <Card className="opinion_content">
                        <span>相关截图(0/3)</span>
                        <br />
                        <Space direction='vertical'>
                            <LimitCount />
                        </Space>
                    </Card>

                    <Card className="opinion_content1">
                        <div>
                            <span>联系方式</span>
                            <Input
                                placeholder='邮箱/手机号码'
                            // value={value}
                            // onChange={val => {
                            //     setValue(val)
                            // }}
                            />
                        </div>
                    </Card>

                    <div className="opinion_btn_div">
                        <button className="opinion_btn">提交</button>
                    </div>
                </div>

            </div>
        </>
    )

}
export default opinion